var wxDraw = require("../../utils/wxdraw").wxDraw;
var Shape = require("../../utils/wxdraw").Shape;
var context = wx.createCanvasContext('first');//还记得 在wxml里面canvas的id叫first吗
Page({
  data: {
    isDown: false,
    percent: 0,
    show_album:false,
    imgArr: [
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534241231427&di=3fd6a9caf18f4000babb07eb8e68a286&imgtype=0&src=http%3A%2F%2Fwww.maogp.com%2FUpFile%2F20140421170455.jpg',

      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534241231423&di=fbf6250c8a2aeab06c237d67ed378397&imgtype=0&src=http%3A%2F%2Fpic1.wed114.cn%2Fallimg%2F160421%2F52_160421111914_9.jpg",

      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534241569131&di=7496b50516b12058d85c98c2aaa787b0&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw640h880%2F20171221%2Ff471-fypvuqe7526358.jpg",

      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534241502235&di=9cb6688bb3ee1b055d8ef5ba68579e8e&imgtype=0&src=http%3A%2F%2Fi3.sinaimg.cn%2Fgm%2F2014%2F0902%2FU7232P115DT20140902095707.jpg",

      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534241502235&di=aa6c2499e518494070403c90d0bbb798&imgtype=0&src=http%3A%2F%2Fwx4.sinaimg.cn%2Fnmw690%2Fad5c3905ly1fcy3wlk4tij20j60xzjwe.jpg",

      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534241502229&di=027a0c51e40caaa651c87f70fcb001da&imgtype=0&src=http%3A%2F%2Fimge.gmw.cn%2Fsite2%2F20161227%2Ff44d305ea48819cc1db558.jpeg"

    ],
    showImg:[]
  },
  startDown: function (e) {
    this.setData({
      isDown: true,
      percent: 100,
    })
  },
  album: function () {
    wx.navigateTo({
      url: '../album/album',
    })
  },
  //上进下出 0
  UpDown:function(imgUrl){
    var that = this;
    let img = new Shape('image', { x: 200, y: 0, w: 200, h: 300, file: imgUrl }, 'fill', true);
    that.wxCanvas.add(img);
    img.animate({ "y": "+300" }, { duration: 3000 }).animate({ "y": "300" },{ duration: 2000 }).animate({ "y": "1000" }, { duration: 1000 }).start(1);
  },
  //上进右出 1
  UpRight: function (imgUrl){
    var that = this;
    let img = new Shape('image', { x: 200, y: 0, w: 200, h: 300, file: imgUrl }, 'fill', true);
    that.wxCanvas.add(img);
    img.animate({ "y": "+300" }, { duration: 1000 }).animate({ "y": "300" }, { duration: 2000 }).animate({ "x": "1000" }, { duration: 1000 }).start(1);
  },
  //左进下出 2
  LeftDown:function(imgUrl){
    var that = this;
    let img = new Shape('image', { x: 0, y: 300, w: 200, h: 300, file: imgUrl }, 'fill', true);
    that.wxCanvas.add(img);
    img.animate({ "x": "+200" }, { duration: 1000 }).animate({ "x": "200" }, { duration: 2000 }).animate({ "y": "1000" }, { duration: 1000 }).start(1);
  },
  //下旋进 3
  DownRotate: function (imgUrl){
    var that = this;
    let img = new Shape('image', { x: 200, y: 600, w: 200, h: 300, file: imgUrl }, 'fill', true);
    that.wxCanvas.add(img);
    img.animate({ "y": 300, rotate: Math.PI * 2  }, { duration: 1000 }).animate({ "x": "200" }, { duration: 2000 }).animate({ "y": "1000" }, { duration: 1000 }).start(1); 
  },
  //右进下出 4
  RightDown:function(imgUrl){
    var that = this;
    let img = new Shape('image', { x: 400, y: 300, w: 200, h: 300, file: imgUrl }, 'fill', true);
    that.wxCanvas.add(img);
    img.animate({ "x": 200 }, { duration: 1000 }).animate({ "x": "200" }, { duration: 1000 }).animate({ "y": "1000" }, { duration: 1000 }).start(1);
  },
  //左下旋进右出 5
  LeftRotateRight: function (imgUrl){
    var that = this;
    let img = new Shape('image', { x: 0, y: 850, w: 200, h: 300, file: imgUrl }, 'fill', true);
    that.wxCanvas.add(img);
    img.animate({ rotate: Math.PI * 3 / 2 }).animate({ x: 200, y: 350, rotate: Math.PI * 2 }).animate({ x: 200 }, { duration: 2000 }).animate({ x: 1000 }, { duration: 1000 }). start(1);
  },
  //渐变 6
  SlowChange: function (imgUrl){
    var that = this;
    let img = new Shape('image', { x: 200, y: 350, w: 10, h: 10, file: imgUrl }, 'fill', true);
    that.wxCanvas.add(img);
    img.animate({ rotate: Math.PI * 3 / 2 }).animate({ x: 200, y: 350, w: 200, h: 300, rotate: Math.PI * 2 }).animate({ x: 200 }, { duration: 2000 }).animate({ x: 200, y: 350, w: 0, h: 0, rotate: Math.PI/2  }, { duration: 1000 }).start(1);
  },
  exchangeLocalImg:function(){
    console.log("777777")
    var that = this;
    var selectAlbums = getApp().globalData.selectAlbums;
    for(var i=0;i<selectAlbums.length;i++){
      wx.downloadFile({
        url:selectAlbums[i],
        success:function(res){
          console.log("这是回调下载回来的图片本地路径===" + res.tempFilePath);
          that.data.showImg.push(res.tempFilePath);
        }
      })
    }
    console.log(that.data.showImg);
  },
  randomShow:function(imgUrl){
    var _this = this;
    var index = Math.floor(Math.random() * 7);
    console.log(index);
    console.log(imgUrl);
    switch (index) {
      case 0:
        _this.UpDown(imgUrl);
        break;
      case 1:
        _this.UpRight(imgUrl);
        break;
      case 2:
        _this.LeftDown(imgUrl);
        break;
      case 3:
        _this.DownRotate(imgUrl);
        break;
      case 4:
        _this.RightDown(imgUrl);
        break;
      case 5:
        _this.LeftRotateRight(imgUrl);
        break;
      case 6:
        _this.SlowChange(imgUrl);
        break;
      default:
        _this.LeftRotateRight(imgUrl);
        break;
    }
  },
  repeatedMove:function(count,index){
    var _this = this;
    var index = (index + 1)%count;
    console.log("总的"+count);
    console.log("我的的"+index);
    setTimeout(function () {
      _this.wxCanvas = new wxDraw(context, 0, 0, 500, 800);
      _this.randomShow(_this.data.showImg[index]);
      _this.repeatedMove(count,index);
    }, 5000);
  },
  onLoad:function(options){
    var _this = this;
    console.log(getApp().globalData.selectAlbums);
    var selectAlbums = getApp().globalData.selectAlbums;
    this.exchangeLocalImg();
    setTimeout(function(){
      _this.setData({show_album:true});
      _this.repeatedMove(selectAlbums.length,-1);
      // setTimeout(function () {
      //   _this.wxCanvas = new wxDraw(context, 0, 0, 500, 800);
      //   _this.randomShow(_this.data.showImg[i]);
      // },6000);
      
      // _this.randomShow(_this.data.showImg[0]);
      // setTimeout(function(){
      //   _this.wxCanvas = new wxDraw(context, 0, 0, 500, 800);
      //   _this.randomShow(_this.data.showImg[1]);
      // },10000)
    },5000);
  }
})